<template>
  <div class="swiper-container">
    <el-carousel trigger="click" height="380px">
      <el-carousel-item v-for="item in swiper_img" :key="item">
        <img :src="item" alt="" class="img" style="width: 100%; height: 100%" />
      </el-carousel-item>
    </el-carousel>

    <div class="swiper-tops-box">
      <p class="title">学车流程</p>
      <ul class="item-container">
        <li class="item-box">
          <div class="icon-box">
            <el-icon :size="20">
              <Edit />
            </el-icon>
          </div>

          <div class="content-box">
            <p>科目一</p>
            <p>2024新题库</p>
          </div>
        </li>
        <li class="item-box">
          <div class="icon-box">
            <el-icon :size="20">
              <Edit />
            </el-icon>
          </div>

          <div class="content-box">
            <p>科目二</p>
            <p>精选视频，详解考点</p>
          </div>
        </li>
        <li class="item-box">
          <div class="icon-box">
            <el-icon :size="20">
              <Edit />
            </el-icon>
          </div>

          <div class="content-box">
            <p>科目三</p>
            <p>全方位讲解，攻克难点</p>
          </div>
        </li>
        <li class="item-box">
          <div class="icon-box">
            <el-icon :size="20">
              <Edit />
            </el-icon>
          </div>

          <div class="content-box">
            <p>科目四</p>
            <p>2024新题库</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
const swiper_img = [
  'https://hefei.jiakaobaodian.com/core-assets/static/images/common/home_banner_download.png',
  'https://hefei.jiakaobaodian.com/core-assets/static/images/common/home_banner_new1.jpeg',
  'https://hefei.jiakaobaodian.com/core-assets/static/images/common/home_banner_jiaolian.jpg',
  'https://hefei.jiakaobaodian.com/core-assets/static/images/common/home_banner_jiaxiaobang.png'
]
</script>

<style scoped lang="scss">
.swiper-container {
  position: relative;
  .swiper-tops-box {
    position: absolute;
    top: 50%;
    left: 280px;
    transform: translateY(-50%);
    width: 280px;
    background-color: rgba(255, 255, 255, 0.9);

    .title {
      width: 240px;
      line-height: 50px;
      font-size: 20px;
      text-align: center;
    }

    .item-container {
      .item-box {
        display: flex;
        align-items: center;
        padding: 18px 20px;
        width: 240px;

        .icon-box {
          width: 40px;
          height: 40px;
          background-color: white;
          border-radius: 20px;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .content-box {
          width: 170px;
          padding-left: 10px;
          p:nth-child(1) {
            font-size: 16px;
            color: #37b5f8;
          }
          p:nth-child(2) {
            font-size: 14px;
            color: #757678;
          }
        }
      }
    }
  }

  // 轮播图指示器样式修改
  ::v-deep .el-carousel__button {
    width: 8px;
    height: 8px;
    border-radius: 4px;
  }
}
</style>
